<template>
  <div class="page-container">
    <div class="page-header">
      <h2>学习监督</h2>
      <div class="student-info">
        <img class="avatar" :src="studentInfo.avatar" alt="学生头像" />
        <div class="info-content">
          <h3>{{ studentInfo.name }}</h3>
          <p>{{ studentInfo.grade }}{{ studentInfo.class }}班</p>
        </div>
      </div>
    </div>

    <!-- 学习概览 -->
    <div class="overview-section">
      <div class="overview-card">
        <div class="overview-icon">📝</div>
        <div class="overview-content">
          <div class="overview-title">本月完成任务</div>
          <div class="overview-number">{{ studyStats.monthlyTasks }}</div>
          <div class="trend up">↑ 较上月增长10%</div>
        </div>
      </div>
      <div class="overview-card">
        <div class="overview-icon">⭐</div>
        <div class="overview-content">
          <div class="overview-title">平均成绩</div>
          <div class="overview-number">{{ studyStats.averageScore }}</div>
          <div class="trend up">↑ 较上月增长5%</div>
        </div>
      </div>
      <div class="overview-card">
        <div class="overview-icon">⏱️</div>
        <div class="overview-content">
          <div class="overview-title">学习时长(h)</div>
          <div class="overview-number">{{ studyStats.studyHours }}</div>
          <div class="trend down">↓ 较上月减少2h</div>
        </div>
      </div>
    </div>

    <!-- 最近学习记录 -->
    <div class="study-records">
      <h3 class="section-title">最近学习记录</h3>
      <div class="records-list">
        <div v-for="record in studyRecords" :key="record.id" class="record-card">
          <div class="record-header">
            <span class="record-type" :class="record.type">{{ getTypeName(record.type) }}</span>
            <span class="record-score">{{ record.score }}分</span>
          </div>
          <h4 class="record-title">{{ record.title }}</h4>
          <div class="record-details">
            <div class="detail-item">
              <i class="icon">⏰</i>
              <span>学习时长：{{ record.duration }}分钟</span>
            </div>
            <div class="detail-item">
              <i class="icon">📅</i>
              <span>完成时间：{{ record.completedAt }}</span>
            </div>
          </div>
          <div class="record-feedback">
            <h5>老师评语：</h5>
            <p>{{ record.feedback }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习建议 -->
    <div class="suggestions-section">
      <h3 class="section-title">学习建议</h3>
      <div class="suggestions-list">
        <div v-for="(suggestion, index) in suggestions" :key="index" class="suggestion-card">
          <div class="suggestion-icon">{{ suggestion.icon }}</div>
          <div class="suggestion-content">
            <h4>{{ suggestion.title }}</h4>
            <p>{{ suggestion.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParentMonitor',
  data() {
    return {
      studentInfo: {
        name: '猪猪侠',
        grade: '初一',
        class: '2',
        avatar: 'https://img1.baidu.com/it/u=1324218107,592305297&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
      },
      studyStats: {
        monthlyTasks: 28,
        averageScore: 92,
        studyHours: 45
      },
      studyRecords: [
        {
          id: 1,
          type: 'vocabulary',
          title: '基础词汇练习 Unit 3',
          score: 95,
          duration: 30,
          completedAt: '2024-02-11 14:30',
          feedback: '词汇掌握良好，发音准确，建议继续保持。'
        },
        {
          id: 2,
          type: 'reading',
          title: '阅读理解训练 Level 2',
          score: 88,
          duration: 45,
          completedAt: '2024-02-10 16:20',
          feedback: '理解大意准确，细节把握需要加强，建议多做阅读训练。'
        },
        {
          id: 3,
          type: 'listening',
          title: '听力练习 Chapter 5',
          score: 85,
          duration: 25,
          completedAt: '2024-02-09 10:15',
          feedback: '听力理解基本到位，需要加强语音语调的识别。'
        },
        {
          id: 4,
          type: 'speaking',
          title: '口语训练 - 日常对话',
          score: 90,
          duration: 20,
          completedAt: '2024-02-08 15:40',
          feedback: '发音清晰，语调自然，继续加强口语练习。'
        }
      ],
      suggestions: [
        {
          icon: '📚',
          title: '加强词汇积累',
          content: '建议每天记忆15-20个新单词，通过情境记忆提高效率。'
        },
        {
          icon: '👂',
          title: '听力训练建议',
          content: '每天坚持听英语新闻或歌曲，培养语感。'
        },
        {
          icon: '📖',
          title: '阅读技巧提升',
          content: '建议采用快速阅读法，先通读全文把握大意，再精读重点段落。'
        },
        {
          icon: '✍️',
          title: '写作能力培养',
          content: '每周完成一篇短文写作，注重句型变换和词汇运用。'
        }
      ]
    }
  },
  methods: {
    getTypeName(type) {
      const typeMap = {
        vocabulary: '词汇',
        reading: '阅读',
        listening: '听力',
        speaking: '口语',
        writing: '写作'
      }
      return typeMap[type] || type
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 30px;
}

.student-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.info-content h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.info-content p {
  margin: 4px 0 0 0;
  color: #909399;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
}

.overview-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.overview-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.overview-number {
  font-size: 24px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 8px;
}

.trend {
  font-size: 12px;
}

.trend.up {
  color: #67c23a;
}

.trend.down {
  color: #f56c6c;
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.records-list {
  display: grid;
  gap: 20px;
}

.record-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.record-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.vocabulary {
  background: #409eff;
}
.reading {
  background: #67c23a;
}
.listening {
  background: #e6a23c;
}
.speaking {
  background: #f56c6c;
}
.writing {
  background: #909399;
}

.record-score {
  font-size: 18px;
  color: #f56c6c;
  font-weight: 500;
}

.record-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #303133;
}

.record-details {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.record-feedback {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
}

.record-feedback h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #303133;
}

.record-feedback p {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.suggestions-section {
  margin-top: 30px;
}

.suggestions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.suggestion-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
  display: flex;
  gap: 16px;
}

.suggestion-icon {
  font-size: 24px;
}

.suggestion-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.suggestion-content p {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .overview-section,
  .suggestions-list {
    grid-template-columns: 1fr;
  }
}
</style>
